<template>
  <!-- body -->
  <div class="app-container">
    <!-- 查询功能框 -->
    <div class="filter-container">
      <template>
        <el-tag type="success" style="margin-left: 20px;margin-right: 30px">{{ dep.depName }}</el-tag>
      </template>
      <template>
        <el-input
          v-model="pageParam.model.patientName"
          style="width: 200px;"
          placeholder="姓名查询..."
          class="filter-item"
          @keyup.enter.native="getListByPage"
          @input="getListByPage"
        />
        <el-select v-model="pageParam.model.applyStatus" placeholder="请选择申请状态" @change="getListByPage">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>

    </div>
    <!-- 数据表格 -->
    <el-table
      :data="patientInfoList"
      fit
      highlight-current-row
      style="width: 100%;"
      @expand-change="showApplicantDetails"
    >

      <el-table-column class="filter-item" type="expand">
        <template slot-scope="{row}">
          <el-form label-position="left" inline class="demo-table-expand">
            <!-- 行数据详情字段 -->

          </el-form>
        </template>
      </el-table-column>

      <!-- 表格字段 -->

      <el-table-column type="index" label="序号"/>

      <el-table-column prop="appNo" label="住院编号"/>
      <el-table-column prop="patientName" label="患者姓名"/>
      <el-table-column prop="tellphone" label="联系方式"/>

      <el-table-column prop="inTime" label="住院时间"/>

      <el-table-column prop="applyStatus" label="申请状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.applyStatus==0" type="danger">申请中</el-tag>
          <el-tag v-if="scope.row.applyStatus==1" type="success">申请成功</el-tag>
          <el-tag v-if="scope.row.applyStatus==2" type="info">申请失败</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="bedId" label="床位编号">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.bedId==null" type="danger">未分配</el-tag>
          <el-tag v-if="scope.row.bedId!=null" type="success">
            {{ dep.depName + "-" + scope.row.wardNo + "-" + scope.row.bedId }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" fit>
        <template slot-scope="{row,$index}">
          <el-button type="success" icon="el-icon-alarm-clock" 　v-if="row.bedId == null & row.applyStatus != 2"
                     size="small" @click="addPatientBed(row)">安排床位
          </el-button>
          <el-button v-if="row.applyStatus == 2" type="info" disabled　size="small" @click="delWard(row)">申请异常
          </el-button>
          <el-button
            v-if="row.bedId != null && row.applyStatus != 2"
            type="danger"
            size="small"
            icon="el-icon-set-up"
            @click="changePatientBed(row)"
          >调整床位
          </el-button>
          <!-- <el-button type="danger" size="small" @click="handleDelete(row,$index)">删除</el-button> -->
        </template>
      </el-table-column>

    </el-table>
    <!-- 表格分页组件 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getListByPage"
    />

    <!-- 病房安排弹窗 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :model="wardList"
        label-position="right"
        label-width="150px"
        style="width: 400px; margin-left:50px;"
      >
        <el-table :data="wardList">
          <el-table-column prop="wardNo" label="病房编号"/>

          <el-table-column prop="wardType" label="病房类型">
            <template slot-scope="scope">
              <span v-if="scope.row.wardType==0">普通病房</span>
              <span v-if="scope.row.wardType==1">高级病房</span>
              <span v-if="scope.row.wardType ==2">特护病房</span>
            </template>
          </el-table-column>

          <el-table-column prop="wardStatus" label="病房状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.wardStatus==0" type="danger">住满</el-tag>
              <el-tag v-if="scope.row.wardStatus==1" type="success">空余</el-tag>
              <el-tag v-if="scope.row.wardStatus==2" type="info">维护</el-tag>
            </template>
          </el-table-column>

          <el-table-column fit label="查看病房">
            <template slot-scope="scope">
              <el-button v-if="scope.row.wardStatus==0" size="mini" type="warning" disabled>床位已满</el-button>
              <el-button v-if="scope.row.wardStatus==1" size="mini" type="success" @click="showBedList(scope)">选择病床
              </el-button>
              <el-button v-if="scope.row.wardStatus==2" size="mini" type="info" disabled>病房维护</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">
          退出
        </el-button>
      </div>
    </el-dialog>

    <!-- 病床安排弹窗 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible2">
      <el-form
        ref="dataForm2"
        :model="bedList"
        label-position="right"
        label-width="150px"
        style="width: 400px; margin-left:50px;"
      >
        <el-table :data="bedList">
          <el-table-column prop="bedNo" label="病床编号"/>

          <el-table-column prop="bedStatus" label="病床状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.bedStatus==0" type="danger">住满</el-tag>
              <el-tag v-if="scope.row.bedStatus==1" type="success">空余</el-tag>
              <el-tag v-if="scope.row.bedStatus==2" type="info">维护</el-tag>
            </template>
          </el-table-column>

          <el-table-column fit label="安排病床">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.bedStatus==0"
                type="warning"
                icon="el-icon-circle-check"
                circle
                disabled
              />
              <el-button
                v-if="scope.row.bedStatus==1"
                type="success"
                icon="el-icon-circle-plus-outline"
                circle
                @click="dialogStatus=='create'?addBed(scope.row):changeBed(scope.row)"
              />
              <el-button
                v-if="scope.row.bedStatus==2"
                type="info"
                icon="el-icon-warning-outline"
                circle
                disabled
              />
            </template>
          </el-table-column>
        </el-table>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2=false">
          退出
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
// 导入组件 分页 需声明组件
import Pagination from '@/components/Pagination'
// 导入请求方法组件
import {
  getCurrentUserDep,
  getAllApplyPatientInfo
} from '@/api/application/application'

import {showWardBedByWardId, showAllWardByDepId} from '@/api/ward/ward'

import {planPatientBed, editPatientBed} from '@/api/bed/bed'

import {mapGetters} from 'vuex'

export default {
  name: 'BedIndex',
  // 组件声明
  components: {
    Pagination
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  data() {
    return {
      textMap: {
        create: '安排病床',
        update: '改变病床'
      },
      dialogStatus: '',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      patientId: '',
      applicantInfo: {},
      dep: {
        depName: '',
        id: ''
      },
      bedList: [],
      wardList: [],
      patientInfoList: [],
      total: 0,
      options: [{
        value: '',
        label: '显示全部'
      }, {
        value: '0',
        label: '申请中'
      }, {
        value: '1',
        label: '申请通过'
      }, {
        value: '2',
        label: '申请失败'
      }, {
        value: '3',
        label: '已住院'
      }, {
        value: '4',
        label: '已出院'
      }
      ], options2: [{
        value: '',
        label: '显示所有'
      }, {
        value: '0',
        label: '已分配'
      }, {
        value: '1',
        label: '未分配'
      }
      ],
      pageParam: {
        pageNum: 1,
        pageSize: 6,
        model: {
          applyStatus: '',
          bedId: '',
          depId: '',
          patientName: ''
        },
        orderParams: [
          ''
        ],
        superSearchKeyWord: ''
      },
      listQuery: { // 分页 排序  查询参数
        pageNum: 1,
        pageSize: 6
      }
    }
  }, created() {
    this.showCurrentDep()
    this.getListByPage()
  }, methods: {
    changeBed(obj) {
      this.dialogStatus = 'update'
      editPatientBed({'bed': obj, 'applicantInfo': this.applicantInfo}).then(res => {
        if (res.content == 20000) {
          this.$notify({
            title: '成功',
            message: '改变成功',
            type: 'success',
            duration: 3000
          })
          this.dialogFormVisible2 = false
          this.dialogFormVisible = false
          this.getListByPage()
        }
      })
    },
    addBed(obj) {
      // alert(this.dialogStatus);
      // console.log("---------------------")
      // console.log(obj)
      planPatientBed({'bed': obj, 'applicantInfo': this.applicantInfo}).then(res => {
        if (res.content == 20000) {
          this.$notify({
            title: '成功',
            message: '安排成功',
            type: 'success',
            duration: 3000
          })
          this.dialogFormVisible2 = false
          this.dialogFormVisible = false
          this.getListByPage()
        }
      })
    },
    showBedList(obj) {
      // console.log("---------------------")
      // console.log(obj)
      this.dialogFormVisible2 = true
      showWardBedByWardId(obj.row.id).then(res => {
        this.bedList = res.content
      })
    },
    changePatientBed(obj) {
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      showAllWardByDepId(this.dep.id).then(res => {
        this.wardList = res.content
        this.patientId = obj.patientId
        this.applicantInfo = obj
      })
    },
    addPatientBed(obj) {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      showAllWardByDepId(this.dep.id).then(res => {
        console.log('---------------------')
        console.log(res)
        this.wardList = res.content
        this.patientId = obj.patientId
        this.applicantInfo = obj
        console.log('---------------------')
        console.log(this.applicantInfo)
      })
    },
    showApplicantDetails() {

    },
    showCurrentDep() {
      if (this.roles.includes('admin')) {
        return
      }
      getCurrentUserDep().then(res => {
        this.dep = res.content
        this.pageParam.model.depId = this.dep.id

      })
    },
    getListByPage() {
      // alert(this.pageParam.model.applyStatus)
      this.pageParam.pageNum = this.listQuery.pageNum
      this.pageParam.pageSize = this.listQuery.pageSize
      // 加载申请列表
      getAllApplyPatientInfo(this.pageParam).then(res => {
        this.patientInfoList = res.content.list
        this.total=res.content.total
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>

</style>
